<!--
 * @Author: wcx 1055127249@qq.com
 * @Date: 2024-12-23 10:38:21
 * @LastEditors: wcx 1055127249@qq.com
 * @LastEditTime: 2025-01-23 17:20:39
 * @FilePath: \my-project\src\views\Descriptions.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div style="padding-top:50px">
    <baseForm v-bind="props" :fields="fields"@change="change" @submit="onSubmit" full/>
  </div>
</template>

<script>
import baseForm from '@/components/jsx/Form'

export default {
  components: {
    baseForm
  },
  data() {
    return {
      props: {
        labelWidth: '120px',
        // labelPosition: 'top' 
      },
      fields: [
        {
          prop: "bizName",
          label: "业务名称",
          type: "input",
          width: '500px',
          required: true
        },
        {
          prop: "bizCode",
          label: "业务编码",
          type: "input",
          width: '500px',
          required: true
        },
        {
          prop: "fields",
          label: "字段列表",
          type: "object-array",
          required: true,
          collapse: false,
          validator(value) {
            if(value.length) {
              const item = value.find(i => !i.name || !i.name1 || !i.name2)
              return item ? '请完善' : true
            } 
            return '请添加'
          },
          children: [
            {
              prop: "name",
              label: "字段英文名",
              type: "input",
              width: '300px',
              required: true
            },
            {
              prop: "name1",
              label: "字段中文名",
              type: "input",
              width: '300px',
              required: true
            },
            {
              prop: "name2",
              label: "字段类型",
              type: "input",
              width: '300px',
              required: true,
              options: [
                { label: "图标", value: "icon" },
                { label: "邮箱", value: "email" }
              ]
            },
          ]
        },
        {
          prop: "type",
          label: "类型",
          type: "checkbox",
          validator(value) {
            if (Boolean(value.length)) return true
            return 'xxxxxx'
          },
          options: [
            { label: "图标", value: "icon" },
            { label: "邮箱", value: "email" }
          ]
        },
        
        {
          prop: "icon",
          label: "图标",
          type: "custom-icon-select",
          validator(value) {
            if (value) return true
            return '请输入图标'
          },
          show: "return form?.type?.includes('icon')"
        },
        {
          prop: "remark",
          label: "备注",
          type: "input",
          validator(value) {
            if (value) return true
            return '请输入图标'
          },
          props: {
            "rows": 4,
            "type": "textarea",
            "placeholder": "请输入内容xxxxx",
            "maxlength": 300,
            "showWordLimit": true
          }
        }
      ]
    }
  },
  methods: {
    change(v) {
      console.log('父组件change', v)
    },
    onSubmit(v){
      console.log('父组件submit', v)
    }
  }
}
</script>